<template>
  <KView class="coupon-classify-tab">
    <KView class="coupon-classify-tab-line"></KView>
    <wx-scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scrollViewId">
      <KView class="coupon-classify-tab-data">
        <KView v-for="(classify,index) in classifyList" :key="`classify_${index}`" class="coupon-classify-tab-view"
          :class="{'select-tab':classify===selectTab}" :id="`coupon-classify-tab__${index}`" @click="toSelectTab(classify)">
          <span class="coupon-classify-tab-view-text">{{typeof classify==='object'?classify.name:classify}}</span>
          <KView v-if="classify===selectTab" class="coupon-classify-tab-view-line"></KView>
        </KView>
      </KView>
    </wx-scroll-view>
  </KView>
</template>

<script>
  export default {
    props: {
      classifyList: {
        type: Array,
        required: true
      },
      selectTab: {
        type: String,
        required: true
      }
    },

    data() {
      return {
        scrollViewId: this.getScrollViewId(this.selectTab)
      };
    },

    methods: {
      toSelectTab(classify) {
        if (this.selectTab === classify) {
          return;
        }

        this.$emit('update:selectTab', classify);
        this.scrollViewId = this.getScrollViewId(classify);
        this.$emit('change', classify);
      },

      getScrollViewId(classify) {
        let classifyList = this.classifyList;
        let index = 0;
        for (let i = 0; i < classifyList.length; i++) {
          const data = classifyList[i];
          if (data === classify) {
            index = i;
            break;
          }
        }

        index -= 1;
        if (index < 0) {
          index = 0;
        }
        return `coupon-classify-tab__${index}`;
      }
    }
  };

</script>

<style lang="scss">
  .coupon-classify-tab {
    height: formatPx(56);
    padding: 0 formatPx(6);
    position: relative;

    .coupon-classify-tab-line {
      position: absolute;
      width: 100%;
      height: 1px;
      left: 0;
      bottom: 0;
      background: #dcdcdc;
    }

    .coupon-classify-tab-data {
      height: 100%;
      white-space: nowrap;

      .coupon-classify-tab-view {
        display: inline-block;
        height: formatPx(56);
        padding: 0 formatPx(24);
        position: relative;
        margin-right: formatPx(30);

        &:last-child {
          margin-right: 0;
        }

        .coupon-classify-tab-view-text {
          height: formatPx(56);
          line-height: formatPx(56);
          font-size: formatPx(30);
        }

        .coupon-classify-tab-view-line {
          position: absolute;
          height: formatPx(2);
          left: formatPx(24);
          right: formatPx(24);
          bottom: 0;
          background: #59c264;
        }

        &.select-tab {
          .coupon-classify-tab-view-text {
            color: #59c264;
          }
        }
      }
    }
  }

</style>
